<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			#header{
				border: 1px solid red;
			}
			#footer{
				border: 1px solid blue;
			}
			.articles{
				margin: 10px;
				padding: 5px;
				border: 1px solid green;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div id="header" >
			<button_componet></button_componet>
			
			<br/>
			
			<titleme info="文章内容" titleme="自定义模板"></titleme>
			
			<!-- 使用 v-bind 来动态传递 prop -->
			<!-- 
			父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件
			同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：
			 -->
			<articles
				v-for="info in infos"
				v-bind:key="info.id"
				v-bind:info="info"
				v-bind:title="info.title"
				v-bind:style="{fontSize:contentFontSize+'em'}"
				v-on:large="contentFontSize += $event"
				v-on:smore="contentFontSize -= $event"
				v-on:info="showInfo"
			></articles>
			
			<searchbox id="searchbox" v-model="searchData"/>
			<h1>{{searchData}}</h1>
			
		</div>
		<br />
		<hr />
		<br />
		<div id="footer">
			<button_componet></button_componet>
			<br />
		</div>
	</body>
	<script>
		
		// 全局组件
		Vue.component('button_componet',{
			// 一个组件的 data 选项必须是一个函数
			data:function(){
				return {count:0}
			},
			template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
		})
		
		// 当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性
		Vue.component('titleme',{
			props:['titleme','info'],
			template:'<p style="border:1px solid red;"><font style="color:red;font-size:0.8em;">{{titleme}}</font><br/>{{info}}</p>'
		})
		
		// 组件v-model,全局注册
		/* 
		Vue.component('searchbox',{
		props: ['value'],
		template: `
			<input
			  v-bind:value="value"
			  v-on:input="$emit('input', $event.target.value)"
			>`
		})
		 */
		// 组件v-model,局部注册
		var searchbox={
			props: ['value'],
			template: `
				<input
					style="border:1px solid red;border-radius:5px;margin:5px;padding:2px;"
					v-bind:value="value"
					v-on:input="$emit('input', $event.target.value)"
				>`
		}
		
		// 通过 Prop 向子组件传递数据
		// 组件事件
		Vue.component('articles',{
			props: ['info'],
			template: `
			<div class="articles">
			<h3>{{ info.title }}</h3>
			<div v-html="info.content"></div>
			<button v-on:click="$emit('large',0.1)">放大字体</button>
			<button v-on:click="$emit('smore',0.1)">缩小字体</button>
			<button v-on:click="$emit('info')">显示信息</button>
			</div>
			`
		})
		
		var header=new Vue({
			el:'#header',
			data:{
				infos:[
					{id:0,title:"元宵节",content:"<i>春节过后，正月十五元宵节便如期而至。这个奔放而又浪漫的节日，我们一起来看看怎么发朋友圈吧~</i>"},
					{id:1,title:"春节",content:"<i>春节，即农历新年，是一年之岁首，传统意义上的“年节”。</i>"}
				],
				contentFontSize:1,
				info:"今天是"+new Date().toLocaleDateString(),
				searchData:"你好"
			},
			methods:{
				showInfo:function(){
					alert(this.info);
				}
			},
			components:{
				'searchbox':searchbox
			}
		})
		
		var footer=new Vue({
			el:'#footer'
		})
	</script>
</html>
